<%@page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en" class="crt crt-nav-on crt-nav-type1 crt-main-nav-on crt-sidebar-on crt-layers-2">
<head>
    <title>${user.name}-首页</title>
    <%@include file="common/header.jsp" %>
</head>
<body class="">
<div class="crt-wrapper">
    <header id="crt-header">
        <nav id="crt-nav-sm" class="crt-nav hidden-lg hidden-md">
            <ul class="clear-list">
                <li>
                    <a href="${ctx}/user/front">
                        <c:choose>
                            <c:when test="${not empty user.photo}">
                                <img class="avatar avatar-42" src="${ctx}/${user.photo}" alt="">
                            </c:when>

                            <c:otherwise>
                                <img class="avatar avatar-42" src="${ctx}/asset/admin/img/avatar.png" alt="">
                            </c:otherwise>

                        </c:choose>

                    </a>
                </li>
                <li><a href="${ctx}/education/front"><span
                        class="crt-icon crt-icon-book"></span></a></li>
                <li><a href="${ctx}/experience/front"><span
                        class="crt-icon crt-icon-experience"></span></a></li>
                <li><a href="${ctx}/project/front"><span
                        class="crt-icon crt-icon-wrench"></span></a></li>
                <li><a href="${ctx}/contact/front"><span
                        class="crt-icon crt-icon-contact"></span></a></li>
                <li><a href="${ctx}/login.jsp"><span
                        class="crt-icon crt-icon-key"></span></a></li>
            </ul>
        </nav><!-- #crt-nav-sm --></header><!-- #crt-header -->
    <div id="crt-container" class="crt-container">
        <div id="crt-nav-wrap" class="hidden-sm hidden-xs">
            <div id="crt-nav-inner">
                <div class="crt-nav-cont">
                    <div id="crt-nav-scroll">
                        <nav id="crt-nav" class="crt-nav">
                            <ul class="clear-list">
                                <li>
                                    <a href="${ctx}/user/front" data-tooltip="首页">
                                        <img class="avatar avatar-42"
                                             src="${ctx}/${user.photo}" alt="">
                                    </a>
                                </li>
                                <li><a href="${ctx}/education/front" data-tooltip="教育经验"><span
                                        class="crt-icon crt-icon-book"></span></a></li>
                                <li><a href="${ctx}/experience/front" data-tooltip="工作经验"><span
                                        class="crt-icon crt-icon-experience"></span></a></li>
                                <li><a href="${ctx}/project/front" data-tooltip="项目经验"><span
                                        class="crt-icon crt-icon-wrench"></span></a></li>
                                <li><a href="${ctx}/contact/front" data-tooltip="联系我吧"><span
                                        class="crt-icon crt-icon-contact"></span></a></li>
                                <li><a href="${ctx}/login.jsp" data-tooltip="后台管理"><span
                                        class="crt-icon crt-icon-key"></span></a></li>
                            </ul>
                        </nav>
                    </div>
                    <div id="crt-nav-tools" class="hidden"><span class="crt-icon crt-icon-dots-three-horizontal"></span>
                        <button id="crt-nav-arrow" class="clear-btn"><span
                                class="crt-icon crt-icon-chevron-thin-down"></span></button>
                    </div>
                </div>
                <div class="crt-nav-btm"></div>
            </div>
        </div><!-- .crt-nav-wrap -->
        <div class="crt-container-sm">
            <div class="crt-paper-layers">
                <div class="crt-paper clear-mrg">
                    <section class="section">
                        <div class="crt-card crt-card-wide bg-primary text-center">
                            <div class="crt-card-avatar">
                                <img class="avatar avatar-195"
                                     src="${ctx}/${user.photo}"
                                     width="195" height="195" alt=""></div>

                            <div class="crt-card-info">
                                <h2 class="text-upper">${user.name}</h2>
                                <p class="text-muted">${user.job}</p>
                                <ul class="crt-social clear-list">
                                    <li><a><span class="crt-icon crt-icon-wechat"></span></a></li>
                                    <li><a><span class="crt-icon crt-icon-qq"></span></a></li>
                                    <li><a><span class="crt-icon crt-icon-weibo"></span></a></li>
                                    <li><a><span class="crt-icon crt-icon-github"></span></a></li>
                                    <li><a><span class="crt-icon crt-icon-blog"></span></a></li>
                                </ul>
                            </div>
                        </div>
                    </section><!-- .section -->
                    <section class="section brd-btm padd-box">
                        <div class="row">
                            <div class="col-sm-12 clear-mrg text-box"><h2 class="title-lg text-upper">关于我</h2>
                                <p style="text-indent:2em">${user.intro}
                                </p>
                            </div>
                        </div>
                    </section><!-- .section -->
                    <section class="section brd-btm padd-box">
                        <div class="row">
                            <div class="col-sm-12 clear-mrg">
                                <h2 class="title-thin text-muted">个人信息</h2>
                                <dl class="dl-horizontal clear-mrg">
                                    <dt class="text-upper">姓名</dt>
                                    <dd>${user.name}</dd>
                                    <dt class="text-upper">生日</dt>
                                    <dd>${user.birthdayStr}</dd>
                                    <dt class="text-upper">住址</dt>
                                    <dd>${user.address}</dd>
                                    <dt class="text-upper">邮箱</dt>
                                    <dd><a href="${user.email}">${user.email}</a></dd>
                                    <dt class="text-upper">电话</dt>
                                    <dd>${user.phone}</dd>
                                </dl>
                            </div><!-- .col-sm-6 -->
                        </div><!-- .row -->
                    </section><!-- .section -->
                    <section class="section brd-btm padd-box">
                        <div class="row">
                            <div class="col-sm-12 clear-mrg">
                                <h2 class="title-thin text-muted">专业技能</h2>
                                <c:forEach items="${skills}" var="skill">
                                    <div class="progress-line crt-animate">
                                        <strong class="progress-title">${skill.name}</strong>
                                        <div class="progress-bar" data-text="${skill.levelString}" data-value="${
                                        (skill.level+1)*0.25
                                        }"></div>
                                    </div>

                                </c:forEach>

                            </div><!-- .col-sm-6 -->
                        </div><!-- .row -->
                    </section><!-- .section -->
                    <section class="section brd-btm padd-box">
                        <div class="row">
                            <div class="col-sm-12 clear-mrg">
                                <h2 class="title-thin text-muted">个人特质</h2>
                                <ul class="styled-list icon-list-col3 clear-mrg">
                                    <c:forEach items="${traits}" var="item">
                                        <li><span class="crt-icon crt-icon-check-circle"></span>${item}</li>
                                    </c:forEach>
                                </ul>
                            </div><!-- .col-sm-6 --></div><!-- .row --></section><!-- .section -->
                    <section class="section brd-btm padd-box">
                        <div class="row">
                            <div class="col-sm-12 clear-mrg">
                                <h2 class="title-thin text-muted">兴趣爱好</h2>
                                <ul class="icon-list icon-list-col3 clearfix">
                                    <c:forEach items="${interests}" var="item">
                                        <li><span class="crt-icon crt-icon-check-circle"></span>${item}</li>
                                    </c:forEach>
                                </ul>
                            </div>
                        </div>
                    </section><!-- .section -->
                </div>
                <!-- .crt-paper -->
            </div><!-- .crt-paper-layers -->
        </div><!-- .crt-container-sm -->
    </div>
    <!-- .crt-container -->
    <footer id="crt-footer" class="crt-container-lg">
        <div class="crt-container">
            <div class="crt-container-sm clear-mrg text-center"><p>${user.name} &copy; All Rights Reserved 2020</p></div>
        </div><!-- .crt-container -->
    </footer><!-- #crt-footer -->
    <svg id="crt-bg-shape-1" class="hidden-sm hidden-xs" height="519" width="758">
        <polygon class="pol" points="0,455,693,352,173,0,92,0,0,71"/>
    </svg>
    <svg id="crt-bg-shape-2" class="hidden-sm hidden-xs" height="536" width="633">
        <polygon points="0,0,633,0,633,536"/>
    </svg>
</div><!-- .crt-wrapper --><!-- Scripts -->
<script src="${ctx}/asset/front/js/modernizr-3.3.1.min.js"></script>
<script src="${ctx}/asset/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/asset/front/js/plugins.min.js"></script>
<script src="${ctx}/asset/front/js/theme.min.js"></script>
</body>
</html>